<template>
	<view class="join-detail">
		<view class="goods-msg-detail">
			<view>
				<image :src="info.main_img" style="width: 100%;height: 422upx;" mode="aspectFill"></image>
			</view>
			<view>
				<text style="word-break: break-all;">奖品：{{info.luckyPrize}}</text>
				<view>
					<view>
						<text v-if="info.open_type==1">{{info.openT}}自动开奖</text>
						<text v-if="info.open_type==2&&info.quota!=null">{{info.openT1}}&nbsp;满{{info.quota}}人&nbsp;自动开奖</text>
						<text>已参与人数{{info.population}}人</text>
					</view>
					<!--#ifdef H5-->
					<button class="join-share"  @click="open_share_tip">
						分享好友
					</button>
					<!--#endif-->
					<!--#ifdef MP-WEIXIN-->
					<button open-type="share" class="join-share">
						分享好友
					</button>
					<!--#endif-->
				</view>
			</view>
		</view>
		<!-- <view class="join-detail-swiper">
			 <swiper class="swiper" indicator-dots="true" autoplay="true" indicator-active-color="#00A66A" indicator-color="#EFEFEF">
				<swiper-item v-for="(one,index) in info.rotation_chart" :key="index">
					<view class="swiper-item uni-bg-red">
						<image :src="one"></image>
						</view>
				</swiper-item>
			</swiper>
		</view> -->
		<view class="join-condition-detail">
			<view>
				<view style="width: 6upx;height: 32upx;background: #00A66A;border-radius: 3upx;margin-top: 4upx;"></view>
				<view style="margin-left: 14upx">
					参与条件
				</view>
			</view>
			<view>
				{{info.grade}}可参与，每人限参与一次
			</view>
		</view>
		<view class="join-detail-welfare">
			<view>
				<view style="width: 6upx;height: 32upx;background: #00A66A;border-radius: 3upx;margin-top: 4upx;"></view>
				<view style="margin-left: 14upx">
					福利详情
				</view>
			</view>
			<view class="rich_text_module">
				<u-parse :content="info.details"></u-parse>
			</view>
			<view class="join-btn">
				<!--#ifdef H5-->
				<button v-show="info.is_state==0&&token" @click="joinLucky">
					参与抽奖
				</button>
				<!--#endif-->
				<!--#ifdef MP-WEIXIN-->
				<!-- 授权登录 -->
				<button v-show="info.is_state==0&&!token" open-type="getUserInfo" withCredentials="true" lang="zh_CN" @getuserinfo="isLogin">
					参与抽奖
				</button>
				<!-- 授权手机号 -->
				<button v-show="info.is_state==0&&token&&!phone&&phone_state==0" open-type="getPhoneNumber" @getphonenumber="getphonenumber">
					参与抽奖
				</button>
				<button v-show="info.is_state==0&&token&&(phone||phone_state==1)" @click="joinLucky">
					参与抽奖
				</button>
				<!--#endif-->
				<view v-if="info.is_state==1" class="has-join">
					已参与
				</view>
				<view>
					<text>已参与人数<text style="color: #FF5C46;">{{info.population}}</text>人</text>
					<view class="join-person" v-if="info.avatarUrl.length>0">
						<image v-for="(one,index) in info.avatarUrl" :key=index :src="one.avatarUrl"></image>
						<view>
							...
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="join-detail-swiper">
			 <swiper class="swiper" indicator-dots="true" autoplay="true" indicator-active-color="#00A66A" indicator-color="#EFEFEF">
				<swiper-item v-for="(one,index) in info.rotation_chart" :key="index">
					<view class="swiper-item uni-bg-red">
						<image :src="one"></image>
						</view>
				</swiper-item>
			</swiper>
		</view> -->
		
		<!-- #ifdef H5 -->
		<!-- 分享提示 -->
		<uni-popup ref="shareTip" :custom="true">
			<view class="popup_box_de_share">
				<image class="popup_box_close_share" src="/static/share_tip.png"></image>
			</view>
		</uni-popup>
		<!-- #endif -->
		<ending></ending>
	</view>
</template>

<script>
	//#ifdef H5
	import {
		userLogin
	} from '../../common/h5login.js'
	//#endif
	
	//#ifdef MP-WEIXIN
	import {
		userLogin
	} from '../../common/login.js'
	//#endif
	import {
		formatLuckyTime,formatMD
	} from '@/common/util.js'
	import ending from '../../common/ending.vue'
	import uParse from '@/components/un-parse/u-parse.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default{
		onShareAppMessage(res) {
			return {
				title: this.info.title,
				path: 'pages/smallLuckydetail/luckyJoinDetail?id='+this.id+'&share_id='+this.userId+'&fromJin=2',
				imageUrl: this.info.main_img
			}
		},
		components:{ending,uParse,uniPopup},
		data(){
			return {
				token: this.$store.getters.getToken,
				userId: this.$store.getters.getUserId,
				phone: this.$store.getters.getPhone,
				phone_state: 0,//0需要授权电话号码，1不需要
				id: 0,
				loginCode: '',
				info: {
					main_img: '',
					luckyPrize: '',
					open_type: '',
					openT: '',
					openT1: '',
					quota: '',
					population: '',
					details: '',
					is_state: '',
					avatarUrl: [],
					grade: ''
				},
				advertising_swiper: this.$imgUrl+'img/smallLucky/advertising_swiper.png',
				share_id: this.$store.getters.getShareId,
				fromJin: this.$store.getters.getFormJin,
				templateIds: [],
				needTemp: []
			}
		},
		onLoad(options) {
			this.id = options.id
			if (options.share_id != undefined) {
				this.share_id = options.share_id
				this.fromJin = options.fromJin
				this.$store.commit('updataFromJin',this.fromJin)
				this.$store.commit('updataShareId', this.share_id)
				console.log('来自分享页面', options)
			}
			//#ifdef MP-WEIXIN
			let self = this
			uni.login({
				provider: 'weixin',
				success: function(res) {
					self.loginCode = res.code
				},
			})
			//#endif
			
		},
		onShow() {
			this.getTempId()
			this.luckDetail()
		},
		methods:{
			subNews(data) {
				let self = this
				uni.requestSubscribeMessage({
					tmplIds: self.needTemp,
					success(res) {
						let arr = []
						for(var p in res){
						  if(res[p] == 'accept') {
							  arr.push(p)
						  }
						}
						self.templateIds = arr
						console.log('授权了的模板id有',arr)
						self.tellManageTmpIds()
					},
					fail(err) {
						console.log('订阅消息fail', err)
					}
				})
			},
			// 获取需要授权的模板id
			getTempId() {
				let self = this
				let data = {
					token: self.$store.getters.getToken,
					type: 2
				}
				self.$api.get_wx_news(data).then(res=>{
					if (res.status) {
						if(res.data.length>0) {
							self.needTemp=res.data
						}else {
							self.needTemp = []
						}
						console.log('订阅消息数据模板id', res)
					}else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				}).catch(err=>{
					console.log('订阅消息数据模板id', err)
				})
			},
			// 告知后台订阅的模板id有哪些
			tellManageTmpIds() {
				let self = this
				let temp = self.templateIds.join(',')
				let data = {
					token: self.$store.getters.getToken,
					templateIds: temp,
					isNoNeedLoading: true
				}
				self.$api.get_wx_news_result(data).then(res => {
					console.log('小程序授权模板告知',res)
				}).catch(err => {
					console.log('小程序授权模板告知',err)
				})
			},
			// 参与抽奖
			isLogin(){
				let self = this
				uni.getSetting({
					success(res) {
						console.log(res)
						if (res.authSetting['scope.userInfo']) {
							if (self.$store.getters.getToken) {
								self.token = self.$store.getters.getToken
								self.userId = self.$store.getters.getUserId
								console.log('有token')
							} else {
								console.log('没有token')
								userLogin(self.share_id,self.fromJin)
								setTimeout(()=> {
									self.luckDetail()
									self.token = self.$store.getters.getToken
									self.userId = self.$store.getters.getUserId
									self.phone = self.$store.getters.getPhone
								},3000)
							}
						}
					},
					fail(err) {
						console.log(err)
					}
				})
			},
			getphonenumber:function(e) {
				let self = this
				uni.checkSession({
					success: function(res) {
						
					},
					fail: function(err) {
						uni.login({
							provider: 'weixin',
							success: function(res) {
								self.loginCode = res.code
							},
						})
					}
				})
				// 问用户是否授权手机号码
				if(e.detail.errMsg=='getPhoneNumber:fail user deny'||e.detail.iv==undefined||e.detail.encryptedData==undefined) {
					uni.showModal({
						content: '拒绝授权后将无法参与抽奖',
						confirmColor: '#00A66A',
						success: function (res) {
						    if (res.confirm) {
						    } else if (res.cancel) {
								uni.showToast({
									title: '请点击参与抽奖进行授权',
									icon: 'none',
									duration: 2000
								})
						    }
						}
					})
				}else {
					let data = {
						token: self.token,
						iv: e.detail.iv,
						encryptedData: e.detail.encryptedData,
						code: self.loginCode
					}
					self.$api.add_phone(data).then(res => {
						if(res.status) {
							self.phone = res.data.phoneNumber
							self.$store.commit('updataPhone',res.data.phoneNumber)
							self.joinLucky()
						}
						console.log('添加手机号码',res)
					}).catch(err => {
						console.log('添加手机号码',err)
					})
					console.log('用户同意授权手机号码',data)
				}
			},
			// 参与抽奖
			joinLucky() {
				let self = this
				let data = {
					token: this.token,
					lucky_id: this.id,
					user_id: this.userId
				}
				this.$api.join_lucky(data).then(res => {
					if(res.status) {
						if(self.needTemp.length>0) {
							uni.showModal({
								content: '成功参与抽奖！是否订阅抽奖结果消息通知？',
								confirmColor: '#00A66A',
								success: function (res) {
								    if (res.confirm) {
										self.subNews()
								    } else if (res.cancel) {
								    }
								}
							})
						}
						setTimeout(()=>{
							self.luckDetail()
						},1000) 
					}else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
					console.log('参与抽奖',res)
				}).catch(err => {
					console.log('参与抽奖',err)
				})
			},
			open_share_tip(){
				this.$refs.shareTip.open()
			},
			// 获取小幸运详情
			luckDetail(){
				let data ={
					token:this.token,
					id:this.id,
					user_id:this.userId
				}
				this.$api.getLuckDetail(data).then(res => {
					if(res.status) {
						this.phone_state = res.list.phone_state
						res.list.openT = formatLuckyTime(res.list.open_time)
						res.list.openT1 = formatMD(res.list.start_time)
						let str = []
						for(let j=0;j<res.list.prize.length;j++) {
							str.push(res.list.prize[j].prize+'×'+res.list.prize[j].num)
						}
						res.list.luckyPrize = str.join(',')
						console.log('小幸运奖品字符串',res.list.luckyPrize)
						this.info = res.list
						let link=this.$store.state.H5URL+'pages/smallLuckydetail/luckyJoinDetail?id='+this.id+'&share_id='+this.userId+'&fromJin=2'
						this.share(this.info.title,this.info.details,this.info.main_img,link=link)
					}else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
						setTimeout(()=>{
							uni.navigateBack({
							})
						},500)
					}
					console.log('获取小幸运详情',res)
				}).catch(err => {
					console.log('获取小幸运详情',err)
				})
			}
		}
	}
</script>

<style>
	.rich_text_module{
		padding: 22upx 0;
		background: #fff;
	}
	page{
		position: relative;
		top: 0;left: 0;right: 0;bottom: 0;
	}
	.join-detail{
		width: 100%;
		height: 100%;
		background: #F5F6F9;
	}
	.goods-msg-detail{
		width: 100%;
		/* height: 604upx; */
		background: #FFFFFF;
	}
	.goods-msg-detail>view:last-child{
		padding: 20upx 30upx 30upx 30upx;
		box-sizing: border-box;
	}
	.goods-msg-detail>view:last-child>view text{
		display: block;
	}
	.goods-msg-detail>view:last-child>view text:first-child{
		color: #FF3C00;
		font-size: 28upx;
		line-height: 40upx;
	}
	.goods-msg-detail>view:last-child>view text:last-child{
		color: #999999;
		font-size: 24upx;
		line-height: 34upx;
	}
	.goods-msg-detail>view:last-child>view{
		margin-top: 14upx;
		display: flex;
		justify-content: space-between;
	}
	.goods-msg-detail>view:last-child>view .join-share{
		width: 180upx;
		height: 60upx;
		line-height: 60upx;
		text-align: center;
		color: #FFFFFF;
		background: linear-gradient(#B3EA00,#00A66A);
		box-shadow: 0 4upx 8upx 0 rgba(0, 166, 106, 0.35);
		font-size: 30upx;
		border-radius: 30upx;
		margin-top: 10upx;
	}
	.join-detail-swiper{
		width: 100%;
		height: 182upx;
		background: #FFFFFF;
		margin-top: 20upx;
		padding-left: 30upx;
		padding-top: 16upx;
		box-sizing: border-box;
	}
	.join-detail-swiper image{
		width: 690upx;
		height: 130upx;
	}
	.join-detail-swiper .swiper,.join-detail-swiper .swiper swiper-item{
		width: 690upx;
		height: 180upx;
	}
	.join-condition-detail{
		width: 100%;
		height: 176upx;
		background: #FFFFFF;
		margin-top: 20upx;
		padding: 0 30upx;
		box-sizing: border-box;
	}
	.join-condition-detail>view:first-child,.join-detail-welfare>view:first-child{
		padding: 22upx 0;
		box-sizing: border-box;
		border-bottom: 0.5px solid #DEDEDE;
		font-size: 30upx;
		color: #333;
		line-height: 42upx;
		display: flex;
	}
	.join-detail-welfare>view:first-child{
		padding-left: 30upx;
	}
	.join-condition-detail>view:last-child{
		padding: 22upx 0;
		box-sizing: border-box;
		color: #000000;
		font-size: 28upx;
	}
	.join-detail-welfare{
		width: 100%;
		background: #FFFFFF;
		margin-top: 20upx;
		box-sizing: border-box;
		/* padding: 0 30upx; */
		padding-bottom: 40upx;
	}
	.detail-welfare{
		margin-top: 22upx;
		font-size: 28upx;
		color: #666666;
	}
	.detail-welfare .detail-welfare-color{
		color: #FF5C46;
	}
	.join-detail-welfare>view:nth-child(5){
		padding: 30upx 0;
		box-sizing: border-box;
		color: #666666;
		font-size: 28upx;
		border-bottom: 1upx solid #DEDEDE;
	}
	.join-btn>button,.has-join{
		width: 284upx;
		height: 284upx;
		background: url(https://lightplanet.tuanhaoke.cn/img/smallLucky/join_btn_bg.png);
		background-size: 100% 100%;
		color: #FFFFFF;
		line-height: 284upx;
		text-align: center;
		font-size: 34upx;
		margin: 50upx auto;
	}
	.join-btn>view:last-child{
		text-align: center;
		color: #999999;
		font-size: 28upx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.join-btn .join-person image{
		width: 52upx;
		height: 52upx;
		border-radius: 50%;
	}
	.join-btn .join-person{
		display: flex;
		box-sizing: border-box;
		margin-top: 14upx;
	}
	.join-btn .join-person>view{
		width: 52upx;
		height: 52upx;
		border-radius: 50%;
		background: #F2F2F2;
		border: 1upx solid #FFFFFF;
		color: #999999;
		text-align: center;
	}
	/* 分享提示 */
	.popup_box_de_share{
		width: 100%;
		height: 100%;
	}
	.popup_box_close_share{
		width: 300upx;
		height: 300upx;
		position: fixed;
		top: 10upx;right: 10upx;
	}
	.popup_box_title{
		display: flex;
		justify-content: space-between;
	}
	.popup_box_title>view:nth-child(2){
		color: #333333;
		font-size: 34upx;
	}
	.popup_box_title_tip{
		color: #999999;
		font-size: 24upx;
		text-align: center;
		margin-top: 10upx;
	}
	.popup_box_tip{
		color: #666666;
		font-size: 26upx;
		text-align: center;
	}
	.popup_box_title>.line{
		width: 84upx;
		height: 2upx;
		border-top: 1upx solid #DEDEDE;
		margin-top: 24upx;
	}
	.popup_box_de{
		width: 592upx;
		height: 744upx;
		position: relative;
		z-index: 999;
	}
	.popup_box_close{
		width: 52upx;
		height: 52upx;
		position: absolute;
		top: 0;
		right: 0;
	}
	.popup_box_content{
		width: 100%;
		height: 682upx;
		background: #FFFFFF;
		position: absolute;
		top: 72upx;left: 0;
		border-radius: 16upx;
		z-index: 999;
		padding: 40upx 46upx;
		box-sizing: border-box;
	}
	.popup_box_content>image{
		width: 388upx;
		height: 386upx;
		margin: 24upx auto 0;
		margin-left: 40upx;
	}
</style>
